<template>
    <div class="video-container">
        <div :id="videoId" ref="videoPlayer"></div>
        <div v-if="!isonline" class="error-level">设备已离线，请稍后再试</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            H256Player: null,
            videoId:'payer',
            isonline:true
        }
    },
    props: {
        src: {
            type: String,
            default: ""
        },
        online:{
            type: Number,
            default: 1
        }
    },
    watch:{
        src:{
            handler(v){
                this.isonline = true
                if (this.H256Player) {
                    this.H256Player.destroy();
                }
                this.$nextTick(() => {
                    this.H256Player = new WasmPlayer("", this.videoId, "", {
                        Height: true
                    });
                    this.H256Player.play(v, 1);
                    this.H256Player.startLoding();
                    setTimeout(() => {
                      this.H256Player.endLoding();
                      this.isonline = this.online == 1
                    }, 2000);
                });
            },
            immediate:true
        }
    },
    created(){
        this.videoId = Number(
        Math.random()
            .toString()
            .substr(3, 12) + Date.now()
        ).toString(36);
    },
    beforeDestroy() {
        if (this.H256Player) {
            this.H256Player.destroy();
            this.H256Player = null;
        }
    }
}
</script>

<style scoped lang="scss">
.video-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000000;
  .error-level{
    position: absolute;
    top: 6%;
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: #FFFFFF;
  }
}
</style>